{% extends 'base.html' %}
{% block css-content %} 
    <link rel="stylesheet" href="/static/jstree/css/style.min.css" />
    <link href="/static/css/doublebox-bootstrap.css" rel="stylesheet">     
    <link rel="stylesheet" href="/static/jquery-confirm/jquery-confirm.min.css">
    <link href="/static/datatable/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/bootstrap-select.css"> 
    <link rel="stylesheet" href="/static/css/jquery.orgchart.css">	
    <link href="/static/datatable/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="/static/datatable/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">  
    <link rel="stylesheet" href="/static/xterm/xterm.css"/>	
    <!-- bootstrap-daterangepicker -->
    <link href="/static/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">    
    <link href="http://apps.bdimg.com/libs/highlight.js/9.1.0/styles/default.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>    
	<style type="text/css"> 	
		.assets-online{
		    color:green;
		}
		.assets-offline{
		    color:red;
		}	
        .modal-select{
            -moz-user-select:none;/*火狐*/
            -webkit-user-select:none;/*webkit浏览器*/
            -ms-user-select:none;/*IE10*/
            -khtml-user-select:none;/*早期浏览器*/
            user-select:none;
            }
          .modal-header{
            cursor:move;
          }	
		td.details-control {
		    background: url('/static/images/details_open.png') no-repeat center center; */
		    cursor: pointer;
		}
		tr.shown td.details-control {
		    background: url('/static/images/details_close.png') no-repeat center center;
		} 
		#compile-editor-add {
	      overflow: hidden;
	      width: 100%;
	      height: 500px; 
	      font-size: 16px;
	   }	        		
	</style>     
{% endblock %}
{% block page-content %}
        <div class="clearfix"></div>
        
            <div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Redis管理入口<small>Redis Manage</small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                    <div class="row">
                      <div class="col-sm-3 mail_list_column"> 
                      <input id="search-input" type="text" class="form-control" placeholder="检索关键词...">   
                      <!-- <span class="section"></span>  -->
					  <legend></legend>                
                      <div id="dbTree"></div>                                     
                      </div>
                      <!-- /MAIL LIST -->
                      <!-- CONTENT MAIL -->              
                  		<div class="col-sm-9 mail_view">  
		                    <table id="redisStatsTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>Redis Stats</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th>指标</th>		
									<th>级别</th>	
									<th>备注</th>									
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table> 		                    
		                    <table id="redisCommandTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>Redis命令执行情况</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th>指标</th>		
									<th>级别</th>	
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>
		                    </table> 	
		                    <table id="redisMemoryTable" style="display:none;" class="table table-striped table-bordered">
		                      <caption>Redis内存状态</caption>
		                      <thead>
		                        <tr>
		                        	<th>名称</th>	
									<th>当前值</th>	
									<th class="center">指标</th>	
									<th>级别</th>		
									<th>备注</th>										
		                        </tr>
		                      </thead>
		                      <tbody>
		                      </tbody>		                    
		                    </table> 		                    	                    			                               			
                  		</div>    
                		<div class="col-sm-3 mail_list_column"> </div> 
                      <!-- CONTENT MAIL -->
                      <div class="col-sm-9 mail_view">
	                    <table id="UserDatabaseListTable" class="table table-striped table-bordered">
	                      <thead>
	                        <tr>
	                        	<th>备注</th>	
								<th>数据库</th>	
								<th>数据库地址</th>		
								<th>端口</th>										
								<th>读写类型</th>		
								<th class="text-center">操作</th>
	                        </tr>
	                      </thead>
	                      <tbody>
	                      </tbody>
	                    </table>                      		
                      </div>
                      <div class="col-sm-3 mail_list_column">                                    
                      </div>                      
                      <div class="col-sm-9 mail_view">
                        <div class="inbox-body" >
			                <div class="" role="tabpanel" data-example-id="togglable-tabs"  id="add_inventory">
			                  <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
			                    <li role="presentation" class="active"><a href="#tab_content1" id="#query" role="tab" data-toggle="tab" aria-expanded="true"><i class="fa fa-cubes"></i> Web Terminal</a>
			                    </li>
<!-- 			                    <li role="presentation" class=""><a href="#tab_content2" role="tab" id="#Binglog" data-toggle="tab" aria-expanded="false"><i class="fa fa-tasks"></i> BinLog解析</a>
			                    </li> 
			                    <li role="presentation" class=""><a href="#tab_content3" role="tab" id="#tableDDL" data-toggle="tab" aria-expanded="false"><i class="fa fa-bar-chart"></i> 表结构查询</a>
			                    </li>                     
			                    <li role="presentation" class=""><a href="#tab_content4" role="tab" id="#optimize" data-toggle="tab" aria-expanded="false"><i class="fa fa-paint-brush"></i> SQL优化建议</a>
			                    </li>  -->                                              
			                  </ul>
			                  <div id="myTabContent" class="tab-content">
			                    <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="#query">
									<div class="col-md-12 col-xs-12">
										<legend>
											<p id="dbChoice"></p>
										</legend>
										<form role="form" method="post" id="exec_db_query" class="main form-horizontal"  novalidate>																								
											<div class="form-group">
												<label>指令<i class="fa fa-info-circle" data-toggle="tooltip" title="输入执行指令"></i></label>	
												<div id="compile-editor-add" class="compile-editor-add"></div> 	
											</div>																																						
											<lable><button type="button" value="" class="btn btn-default btn-sm disabled" id="db_terminal_btn" >关闭</button></lable>
										</form> 										
									</div>
									<div class="hr hr32 hr-dotted"></div>
						           <div class="col-md-12 col-xs-12" id="show_sql_result" style="display:none;">
						            <div class="x_panel">
						              <div class="x_title">
						                <h2>执行结果 <small>Results of execution</small></h2>
						                <ul class="nav navbar-right panel_toolbox">
						                  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
						                  </li>
						                  <li class="dropdown">
						                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
						                  </li>
						                  <li><a class="close-link"><i class="fa fa-close"></i></a>
						                  </li>
						                </ul>
						                <div class="clearfix"></div>
						              </div>
						              <div class="x_content">
						                    <div id="exec_result">
						                    </div>             
						              </div>
						            </div>
						          </div> 									
								</div>
			                    <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="#Binglog">
									<div class="col-lg-4">
										<legend>
											<p id="dbDmlBinlog"></p>
										</legend>
										<form role="form" method="post" id="parse_binlog_file" class="main form-horizontal"  novalidate>	
											<input  type="hidden" class="form-control"  name="model" value="parse_sql"> 																
											<div class="form-group" >
												 <label> binlog文件<i class="fa fa-info-circle" data-toggle="tooltip" title="选择binlog文件"></i></label>
												 <select required="required" class="selectpicker form-control" data-live-search="true" name="binlog_db_file" id="binlog_db_file"  data-size="10" data-selected-text-format="count > 3"  data-width="100%"  autocomplete="off">
												   	<option>请选择一个binlog文件</option>								   							
												 </select>											
											</div>	
											<div class="form-group" >
												 <label> 表<i class="fa fa-info-circle" data-toggle="tooltip" title="选择指定表"></i></label>
												 <input type="text" name="binlog_table" id="binlog_table" placeholder="多个表以,号分割开来; 不填就是解析整个数据库" class="form-control" value="" />										
											</div>											
				                            <div class="control-group">
				                              <label> 选择时间段</label>
				                              <div class="controls">
				                                <div class="input-prepend input-group">
				                                  <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
				                                  <input type="text" name="binlog_time" id="binlog_time" class="form-control"/>
				                                </div>
				                              </div>
				                            </div>	
											<div class="form-group" >
												 <label> 类型<i class="fa fa-info-circle" data-toggle="tooltip" title="解析或者回闪binglog"></i></label>
												 <select required="required" class="selectpicker form-control" name="flashback" id="flashback"  autocomplete="off">
												   	<option value="0" selected="selected">解析</option>		
												   	<option value="1">回闪</option>							   							
												 </select>											
											</div>					                            																																																		
											<lable>
												<button type="button" value="" class="btn btn-default btn-sm" id="db_binlog_btn">运行</button>
												<button type="button" value="" class="btn btn-default btn-sm" id="db_binlog_async">后台</button>
											</lable>
										</form> 
									 </div>
									<div class="col-lg-8">
										<legend>
											<i class="fa  fa-paper-plane-o"></i> 解析结果
										</legend>
										<div id="binlog_result">
					                    </div>							
									 </div>						 
			                    </div> 
			                    <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="#tableDDL">
									<div class="col-lg-4">
										<legend>
											<p id="dbTable"></p>
										</legend>
										<form role="form" method="post" id="table_schema_form" class="main form-horizontal"  novalidate>	
											<input  type="hidden" class="form-control"  name="model" value="table_schema"> 																
											<div class="form-group" >
												 <label> 表名<i class="fa fa-info-circle" data-toggle="tooltip" title="选择表"></i></label>
												 <select required="required" class="selectpicker form-control" data-live-search="true" name="table_name" id="table_name"  data-size="10" data-selected-text-format="count > 3"  data-width="100%"  autocomplete="off">
												   	<option>请选择表</option>								   							
												 </select>											
											</div>																																																											
											<lable><button type="button" value="" class="btn btn-default btn-sm" id="db_schema_btn">查看</button></lable>
										</form> 
									 </div>
									<div class="col-lg-8">
										<legend>
											<i class="fa  fa-paper-plane-o"></i> 查询结果
										</legend>
				                        <div id="schema_result">		                        
				                        </div>							
									 </div>						 
			                    </div>                     
			                     <!-- CustomSql -->
			                    <div role="tabpanel" class="tab-pane fade" id="tab_content4" aria-labelledby="#optimize">
									<div class="col-lg-4">
										<legend>
											<p id="dbOptimize"></p>
										</legend>
										<form role="form" method="post" id="optimize_sql">
											{% csrf_token %}									
											<input  type="hidden" class="form-control"  name="model" value="optimize_sql"> 	
											<div class="form-group" >
												 <label> SQL内容<i class="fa fa-info-circle" data-toggle="tooltip" title="填写SQL"></i></label>
												 <textarea class="form-control" rows="10" id="db_optimize_sql"></textarea>												
											</div>																					
											<lable><button type="button" value="" class="btn btn-default btn-sm" id="db_optimize_btn">执行</button></lable>
											<button type="reset" class="btn btn-default btn-sm">撤销</button>
										</form>
									 </div>
									 <div class="col-lg-8">
										<legend>
											<i class="fa  fa-paper-plane-o"></i> 建议结果
										</legend>
				                        <div id="optimize_result">		                        
				                        </div>															 	
									 </div>
			                    </div>                         
			                </div>                                  
			              </div>
                        </div>
                      </div>
                      <!-- /CONTENT MAIL -->
                    </div>
                  </div>
                </div>
              </div>
            </div>                          	        		                        
                      
{% endblock %}
{% block js-content %}
	<script type="text/javascript" src="/static/js/tagcanvas/jquery.tagcanvas.js"></script>    
	<script src="/static/jquery-confirm/jquery-confirm.min.js"></script>
	<script src="/static/validator/validator.js"></script>
	<script src="/static/jstree/js/jstree.min.js"></script>
    <script src="/static/datatable/datatables.net/js/jquery.dataTables.min.js"></script>
	<script src="/static/datatable/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>	
    <script src="/static/datatable/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/static/datatable/datatables.net-buttons/js/buttons.print.min.js"></script>	
	<script src="/static/js/database/redis/manage.js"></script>	
	<script src="/static/xterm/xterm.js"></script>
  	<script src="/static/xterm/addons/fit/fit.js"></script>
 	<script src="/static/xterm/addons/fullscreen/fullscreen.js"></script>   				
{% endblock %}